<script setup>
import { ref, onMounted, computed } from 'vue'
import { Search, View, Loading } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../utils/request'

// 门店数据
const stores = ref([])
const loading = ref(false)
const searchKeyword = ref('')
const statusFilter = ref('')

// 分页数据
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  totalPages: 0
})

// 详情对话框
const detailDialogVisible = ref(false)
const currentStore = ref(null)

// 获取门店列表
const fetchStores = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      search: searchKeyword.value,
      status: statusFilter.value
    }

    const response = await request.get('/api/stores', { params })
    const result = response.data
    
    if (result.code === 200) {
      stores.value = result.data.stores
      pagination.value = result.data.pagination
    } else {
      ElMessage.error(result.message || '获取门店列表失败')
    }
  } catch (error) {
    console.error('获取门店列表失败:', error)
    // 错误处理已在request拦截器中完成
  } finally {
    loading.value = false
  }
}

// 查看门店详情
const viewStoreDetail = async (store) => {
  try {
    const response = await request.get(`/api/stores/${store._id}`)
    const result = response.data
    
    if (result.code === 200) {
      currentStore.value = result.data
      detailDialogVisible.value = true
    } else {
      ElMessage.error(result.message || '获取门店详情失败')
    }
  } catch (error) {
    console.error('获取门店详情失败:', error)
    // 错误处理已在request拦截器中完成
  }
}

// 搜索处理
const handleSearch = () => {
  pagination.value.current = 1
  fetchStores()
}

// 重置搜索
const resetSearch = () => {
  searchKeyword.value = ''
  statusFilter.value = ''
  pagination.value.current = 1
  fetchStores()
}

// 分页处理
const handlePageChange = (page) => {
  pagination.value.current = page
  fetchStores()
}

// 页面大小改变
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.current = 1
  fetchStores()
}



// 状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case '营业中':
      return 'success'
    case '暂停营业':
      return 'warning'
    case '装修中':
      return 'info'
    default:
      return 'info'
  }
}

onMounted(() => {
  fetchStores()
})
</script>

<template>
  <div class="look-store-container">
    <div class="page-header">
      <h2>查看门店</h2>
      <p>查看所有门店的基本信息和状态</p>
    </div>
    
    <div class="content-card">
      <div class="card-header">
        <div class="header-left">
          <h3>门店列表</h3>
        </div>
        
        <div class="search-area">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索门店名称、地址、店长或电话"
            size="small"
            style="width: 300px; margin-right: 10px;"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          
          <el-select
            v-model="statusFilter"
            placeholder="选择状态"
            size="small"
            style="width: 120px; margin-right: 10px;"
            clearable
          >
            <el-option label="营业中" value="营业中" />
            <el-option label="暂停营业" value="暂停营业" />
            <el-option label="装修中" value="装修中" />
          </el-select>
          
          <el-button type="primary" size="small" @click="handleSearch">
            搜索
          </el-button>
          
          <el-button size="small" @click="resetSearch">
            重置
          </el-button>
        </div>
      </div>
      
      <div class="store-list">
        <div v-if="loading" class="loading-container">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>加载中...</span>
        </div>
        
        <div v-else-if="stores.length === 0" class="empty-state">
          <el-empty description="暂无门店数据" />
        </div>
        
        <div v-else class="store-grid">
          <div v-for="store in stores" :key="store._id" class="store-card">
            <div class="store-header">
              <h4>{{ store.name }}</h4>
              <el-tag :type="getStatusType(store.status)">
                {{ store.status }}
              </el-tag>
            </div>
            
            <div class="store-info">
              <div class="info-item">
                <span class="label">地址：</span>
                <span class="value">{{ store.address }}</span>
              </div>
              <div class="info-item">
                <span class="label">电话：</span>
                <span class="value">{{ store.phone }}</span>
              </div>
              <div class="info-item">
                <span class="label">店长：</span>
                <span class="value">{{ store.manager }}</span>
              </div>
              <div class="info-item">
                <span class="label">员工数：</span>
                <span class="value">{{ store.staffCount }}人</span>
              </div>
              <div class="info-item">
                <span class="label">营业时间：</span>
                <span class="value">{{ store.businessHours }}</span>
              </div>
            </div>
            
            <div class="store-actions">
              <el-button type="primary" size="small" @click="viewStoreDetail(store)">
                <el-icon><View /></el-icon>
                查看详情
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div v-if="stores.length > 0" class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagination.pageSize"
          :current-page="pagination.current"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
    
    <!-- 门店详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="门店详情"
      width="600px"
      :before-close="() => detailDialogVisible = false"
    >
      <div v-if="currentStore" class="store-detail">
        <div class="detail-item">
          <span class="label">门店名称：</span>
          <span class="value">{{ currentStore.name }}</span>
        </div>
        <div class="detail-item">
          <span class="label">门店地址：</span>
          <span class="value">{{ currentStore.address }}</span>
        </div>
        <div class="detail-item">
          <span class="label">联系电话：</span>
          <span class="value">{{ currentStore.phone }}</span>
        </div>
        <div class="detail-item">
          <span class="label">店长：</span>
          <span class="value">{{ currentStore.manager }}</span>
        </div>
        <div class="detail-item">
          <span class="label">门店状态：</span>
          <el-tag :type="getStatusType(currentStore.status)">
            {{ currentStore.status }}
          </el-tag>
        </div>
        <div class="detail-item">
          <span class="label">员工数量：</span>
          <span class="value">{{ currentStore.staffCount }}人</span>
        </div>
        <div class="detail-item">
          <span class="label">营业时间：</span>
          <span class="value">{{ currentStore.businessHours }}</span>
        </div>
        <div class="detail-item">
          <span class="label">门店描述：</span>
          <span class="value">{{ currentStore.description || '暂无描述' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ new Date(currentStore.createTime).toLocaleString() }}</span>
        </div>
        <div class="detail-item">
          <span class="label">更新时间：</span>
          <span class="value">{{ new Date(currentStore.updateTime).toLocaleString() }}</span>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.look-store-container {
  min-height: calc(100vh - 140px);
  padding: 20px;
  background-color: #f5f7fa;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.content-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: calc(100vh - 200px);
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.search-area {
  display: flex;
  align-items: center;
}

.store-list {
  padding: 20px;
  min-height: 400px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 10px;
  color: #909399;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.store-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.store-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.store-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}

.store-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item .label {
  color: #909399;
  width: 80px;
  flex-shrink: 0;
}

.info-item .value {
  color: #606266;
  flex: 1;
}

.store-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #ebeef5;
}

/* 详情对话框样式 */
.store-detail {
  padding: 20px 0;
}

.detail-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.detail-item .label {
  color: #909399;
  width: 100px;
  flex-shrink: 0;
  font-weight: bold;
}

.detail-item .value {
  color: #606266;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .look-store-container {
    padding: 10px;
  }
  
  .content-card {
    min-height: calc(100vh - 120px);
  }
  
  .card-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .header-left {
    justify-content: space-between;
  }
  
  .search-area {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .search-area .el-input {
    width: 100% !important;
  }
  
  .store-grid {
    grid-template-columns: 1fr;
  }
}
</style>